<template>
  <div class="divShow">
    <el-row>
      <el-col :span="24">
        <div style="padding: 30px;">
          <!-- 搜索框 -->
          <el-form :inline="true" :model="searchWorkshop" class="demo-form-inline" v-if="showSearch">
            <el-form-item label="车间编码">
              <el-input v-model="searchWorkshop.workshopCode" placeholder="请输入车间编码"></el-input>
            </el-form-item>
            <el-form-item label="车间名称">
              <el-input v-model="searchWorkshop.workshopName" placeholder="请输入车间名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="checkWorkshop">查询</el-button>
              <el-button @click="cleanWorkshop">重置</el-button>
            </el-form-item>
          </el-form>


          <el-row>
            <el-col :span="22">
              <!-- 按钮 -->
              <el-button type="primary" size="small" @click="changeDialog(null)">新增</el-button>
              <el-button type="success" size="small" :disabled="!judgmentCh"
                @click="changeDialog(SelWorkshopId)">修改</el-button>
              <el-button type="danger" size="small" :disabled="!judgmentDe" @click="delJudg">删除</el-button>
            </el-col>
            <el-col :span="2">
              <div>
                <el-tooltip content="隐藏搜索" placement="top">
                  <el-button icon="el-icon-search" circle @click="toggleSearch"></el-button>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                  <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <!-- 表格 -->
          <el-table :data="workshopTable" ref="VendorTable" style="width: 100%;"
            @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="workshopId" label="车间ID" v-if="false">
            </el-table-column>
            <el-table-column prop="workshopCode" label="车间编码">
            </el-table-column>
            <el-table-column prop="workshopName" label="车间名称">
            </el-table-column>
            <el-table-column prop="area" label="面积">
            </el-table-column>
            <el-table-column prop="charge" label="负责人">
            </el-table-column>
            <el-table-column prop="enableFlag" label="是否启用">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.enableFlag === 'Y'">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-col :span="12">
                  <el-link type="primary" @click="changeDialog(scope.row.workshopId)">修改</el-link>
                </el-col>
                <el-col :span="12">
                  <el-link type="primary" @click="delDialog(scope.row.workshopId)">删除</el-link>
                </el-col>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页模块 -->
          <el-pagination :page-size="searchWorkshop.pageSize" :total="searchWorkshop.total"
            @current-change="searchWorkshopChange" layout="prev, pager, next">
          </el-pagination>

          <!-- dialog -->
          <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" class="rounded-dialog"
            :close-on-click-modal="false" @close="closeWorkshopDialog">
            <el-form :model="AddWorkshop" ref="workshopForm" :rules="rules">

              <el-form-item label="车间编码" prop="workshopCode">
                <el-input v-model="AddWorkshop.workshopCode" autocomplete="off" style="width: auto;"></el-input>
              </el-form-item>
              <el-form-item label="车间名称" prop="workshopName">
                <el-input v-model="AddWorkshop.workshopName" autocomplete="off" style="width: auto;"></el-input>
              </el-form-item>
              <el-form-item label="面积" prop="area">
                <el-input-number v-model="AddWorkshop.area" :min="1" :max="200" label="描述文字"
                  style="width: auto;"></el-input-number>
              </el-form-item>
              <el-form-item label="负责人" prop="charge">
                <el-input v-model="AddWorkshop.charge" autocomplete="off" style="width: auto;"></el-input>
              </el-form-item>
              <el-form-item label="是否启用" prop="enableFlag">
                <el-radio v-model="AddWorkshop.enableFlag" label="Y">是</el-radio>
                <el-radio v-model="AddWorkshop.enableFlag" label="N">否</el-radio>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="AddWorkshop.remark" autocomplete="off" style="width: auto;"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closeWorkshopDialog">取 消</el-button>
              <el-button type="primary" @click="submitForm('workshopForm')">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';
import * as XLSX from 'xlsx'; // 使用命名导入
import FileSaver from 'file-saver';
import excelExport from '../../utils/excel-export';
export default {
  data() {
    return {
      // 设置dialog默认不显示
      dialogFormVisible: false,
      //根据是否有id输入判断标题
      dialogTitle: '',
      // 分页查询数据
      searchWorkshop: {
        workshopCode: '',
        workshopName: '',
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },
      // 查询显示表格
      workshopTable: [],
      //新增AddWorkshop或者修改AddWorkshop
      AddWorkshop: {
        workshopId: '',
        workshopCode: '',
        workshopName: '',
        area: '',
        charge: '',
        enableFlag: '',
        remark: '',
      },
      // 存储所有选中的行
      selectedRows: [],
      judgmentCh: false,
      judgmentDe: false,
      //当前选中行的vendorId的数组
      arrayWorkshopId: [],
      // 获取当前选中行的vendorId
      SelWorkshopId: '',
      showSearch: true, // 控制搜索框的显示和隐藏
      columns: [
        'workshopCode',
        'workshopName',
        'area',
        'charge',
        'enableFlag',
        'remark"',
      ],
      rules: {
        workshopCode: [
          { required: true, message: '请输入车间编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        workshopName: [
          { required: true, message: '请输入车间名称', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        enableFlag: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ]
      }
    }
  },

  mounted() {
    this.checkListWorkshop();
  },
  methods: {
    //刷新按钮
    refresh() {
      location.reload();
    },
    //是否显示搜索框
    toggleSearch() {
      // 切换搜索框的显示和隐藏
      this.showSearch = !this.showSearch;
    },
    //删除判断
    delJudg() {
      if (this.selectedRows.length === 1) {
        //删除单个id
        this.delDialog(this.SelWorkshopId)
      } else {
        //删除多个id
        console.log(this.arrayWorkshopId);
        this.$confirm("确定要删除" + this.arrayWorkshopId + " 这" + this.arrayWorkshopId.length + "条数据吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delWorkshopIdArray(this.arrayWorkshopId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //获取当前选中表格行的状态
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      // 更新 arrayWorkshopId
      this.arrayWorkshopId = selection.map(row => row.workshopId);
      
      if (selection.length === 1) {
        //获取单个id
        this.SelWorkshopId = this.selectedRows[0].workshopId
        console.log(this.SelWorkshopId);

        this.judgmentDe = true;
        this.judgmentCh = true;
      } else if (selection.length > 1) {
        //获取一组id
        let rowsLength = this.selectedRows.length
        for (let index = 0; index < rowsLength; index++) {
          this.arrayWorkshopId[index] = this.selectedRows[index].workshopId;
        }
        this.judgmentCh = false;
        this.judgmentDe = true;
      } else {
        this.judgmentCh = false;
        this.judgmentDe = false;
      }
    },
    //根据传递进来的MdItemId数组来进行批量删除
    delWorkshopIdArray(arrayWorkshopId) {
      this.$axios.delete("http://localhost:9970/emsSystem/api/workshop/delWorkshopIdArray", { data: arrayWorkshopId }).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$message.success("删除成功");
          this.checkListWorkshop();
        }
      })
    },
    //根据id删除指定数据
    delDialog(workshopId) {
      this.$confirm("确定要删除该编号为 " + workshopId + " 的信息, 是否继续?", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("http://localhost:9970/emsSystem/api/workshop/delWorkshop/" + workshopId).then((res) => {
          if (res.data.code === 200) {
            //删除成功
            this.$message.success("删除成功");
            this.checkListWorkshop();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //关闭dialog并且清空里面的数据
    closeWorkshopDialog() {
      this.$refs.workshopForm.resetFields();
      this.AddWorkshop.workshopId = "",
        this.dialogFormVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
          this.AddOrChWorkshop();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    //添加或者修改Vendor
    AddOrChWorkshop() {
      let qsWorkshop = qs.stringify(this.AddWorkshop);
      this.$axios.post("http://localhost:9970/emsSystem/api/workshop/AddOrChWorkshop", qsWorkshop).then((res) => {
        if (res.data.code === 200) {
          //修改成功
          this.$message.success("修改或新增成功");
          this.dialogFormVisible = false;
          this.checkListWorkshop();
        }
      })
    },
    //改变dialog显示状态
    changeDialog(id) {
      this.dialogFormVisible = true
      if (id == null) {
        this.dialogTitle = "添加车间"
      } else {
        this.dialogTitle = "修改车间"
        this.AddWorkshop.workshopId = id
        this.checkWorkshopById(id);
      }

    },
    //根据workshopId查询数据
    checkWorkshopById(workshopId) {
      this.$axios.post("http://localhost:9970/emsSystem/api/workshop/checkWorkshopById/" + workshopId).then((res) => {
        if (res.data.code === 200) {
          this.AddWorkshop = res.data.data
        }
      })
    },
    // 改变页码
    searchWorkshopChange(value) {
      this.searchWorkshop.pageNo = value;
      this.checkListWorkshop();
    },
    // 进行条件搜索
    checkWorkshop() {
      this.checkListWorkshop();
    },
    // 清空搜索框
    cleanWorkshop() {
      this.searchWorkshop.workshopCode = ""
      this.searchWorkshop.workshopName = ""
    },
    // 查询Workshop数据方法
    checkListWorkshop() {

      let qsStr = qs.stringify(this.searchWorkshop);

      this.$axios.post("http://localhost:9970/emsSystem/api/workshop/checkListWorkshop", qsStr).then((res) => {
        if (res.data.code === 200) {
          this.workshopTable = res.data.data.records
          this.searchWorkshop.pageNo = res.data.data.current
          this.searchWorkshop.pageSize = res.data.data.size
          this.searchWorkshop.total = res.data.data.total
        }
      })
    }
  }
}

</script>
<style>
.divShow {
  background-color: white;
  border-radius: 10px;
}

.rounded-dialog .el-dialog {
  border-radius: 10px;
  /* 设置圆角 */
}
</style>
